import React, {Component} from "react";
import {
    ListView,
    Text,
    View,
    Button,
    Alert,
    TouchableOpacity,
    Image,
    DatePickerAndroid,
    DatePickerIOS,
    Platform
} from "react-native";
import chjStyle from "../../../CustomStyle";

export default class DateInputTextItem extends React.Component
{
    constructor(props)
    {
        super(props);

        var dateString = this.props.object.value;
        var splitsString = dateString.split('-');
        var date = new Date();

        if (splitsString.length > 1) {
            var year = parseInt(splitsString[0]);
            var month = parseInt(splitsString[1]);

            date.setFullYear(year, month);
            if (splitsString.length > 2) {
                var day = parseInt(splitsString[2]);
                date.setDate(day);
            }
        }

        this.state = {
            date: date,
        };
    }

    render() {
        if (Platform.OS == 'ios') {
            return (<TouchableOpacity
                style={{
                    width: chjStyle.getActualSizeInHorizontal(750),
                    height: chjStyle.getActualSizeInVertical(430),
                    borderBottomWidth: 1 / chjStyle.pi,
                    borderBottomColor: '#dddddd'
                }}
                onPress={this.showDatePicker.bind(this)}>
              <Text
                  style={{
                      position:'absolute',
                      color:'#303030',
                      textAlign: 'left',
                      backgroundColor: 'rgba(0, 0, 0, 0)',
                      fontSize: chjStyle.getActualFontSize(30),
                      top: chjStyle.getActualSizeInVertical(40),
                      left: chjStyle.getActualSizeInHorizontal(40),
                      width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.name}</Text>
              <DatePickerIOS
                  style={{left: chjStyle.getActualSizeInHorizontal(150), width:chjStyle.getActualSizeInHorizontal(600)}}
                  date={this.state.date}
                  mode="date"
                  maximumDate={this.props.maxDate}
                  onDateChange={(date)=>this.onDateChange(date)}
              />
            </TouchableOpacity>);
        } else {
            return (
                <TouchableOpacity
                    style={[chjStyle.textItem]}
                    onPress={this.showDatePicker.bind(this)}>
                  <Text
                      style={{
                      position:'absolute',
                      color:'#303030',
                      textAlign: 'left',
                      backgroundColor: 'rgba(0, 0, 0, 0)',
                      fontSize: chjStyle.getActualFontSize(30),
                      top: chjStyle.getActualSizeInVertical(40),
                      left: chjStyle.getActualSizeInHorizontal(40),
                      width: chjStyle.getActualSizeInHorizontal(375),
                    }}>{this.props.object.name}</Text>
                  <Text style={{
                      position:'absolute',
                      color:'#303030',
                      textAlign: 'right',
                      backgroundColor: 'rgba(0, 0, 0, 0)',
                      fontSize: chjStyle.getActualFontSize(30),
                      top: chjStyle.getActualSizeInVertical(40),
                      right: chjStyle.getActualSizeInHorizontal(30),
                      width: chjStyle.width,
                    }}>{this.props.object.value}</Text>
                </TouchableOpacity>
            );
        }
    }
    // 注意，对应函数里使用的await关键字，如果函数不加async修饰符，会报错
    async showDatePicker()
    {
        if (Platform.OS === 'ios'){
            // TODO: 用DatePickerIOS组件，实现一个IOS端的选择界面
        } else {
            var options = {
                date: new Date(),
                mode: 'spinner'
            };
            if (this.props.maxDate) {
                options.maxDate = this.props.maxDate;
            }
            if (this.props.minDate) {
                options.minDate = this.props.minDate;
            }
            try {
                const {action, year, month, day} = await DatePickerAndroid.open(options);
                if (action !== DatePickerAndroid.dismissedAction) {
                    // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
                    if (this.props.onlyYearMonth) {
                        this.props.object.value = year + '-' + (month<9?'0':'') + (month+1);
                    } else {
                        this.props.object.value = year + '-' + (month<9?'0':'') + (month+1) + '-' + (day<10?'0':'') + day;
                    }
                    if (this.props.onDatePickedListener) {
                        this.props.onDatePickedListener(year,month,day);
                    }
                    this.setState({});
                }
            } catch ({code, message}) {
                Alert.alert('Cannot open date picker', message);
            }
        }
    }

    onDateChange(date) {
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        this.setDate(year, month, day);
        if (this.props.onDatePickedListener) {
            this.props.onDatePickedListener(year,month,day);
        }
    }

    setDate(year, month, day)
    {
        if (this.props.onlyYearMonth) {
            this.props.object.value = year + '-' + (month<9?'0':'') + (month+1);
        } else {
            this.props.object.value = year + '-' + (month<9?'0':'') + (month+1) + '-' + (day<10?'0':'') + day;
        }
        var date = new Date(year, month, day);
        this.setState({date: date});
    }
}
